<template>
  <div class="distribution-list-container">
    <!-- 名单分配 -->
    <div class="list-distribution">
      <div class="list-header">
        <h1>名单分配</h1>
        <ui-button class="primary-btn" @click="onChoiceManager">选择客户经理</ui-button>
      </div>
      <div class="list-table">
        <vx-table :table-data="tableData" :columns="columns" :buttom-group="buttomGroup" @deleteData="deleteData" @modifyData="modifyData"></vx-table>
      </div>
    </div>
    <!-- 名单列表 -->
    <div class="list-content">
      <div class="list-header">
        <h1>名单列表</h1>
      </div>
      <div class="list-table">
        <vx-table :table-data="managerData" :columns="managerColumns" :is-select="true" @multipleSelection="multipleSelection"></vx-table>
        <div class="page">
          <ui-pagination
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            :layout="layout"
            :page-sizes="pageSizeList"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </ui-pagination>
        </div>
      </div>
    </div>
    <!-- 按钮 -->
    <ui-row type="flex" class="row-bg" justify="center">
      <ui-button type="primary" plain @click="returnPrePage">返 回</ui-button>
      <ui-button type="primary" plain @click="goDistribution">分 配</ui-button>
    </ui-row>
    <!-- 选择客户经理 -->
    <ui-dialog :visible.sync="managerDialog" title="客户分配" width="50%">
      <div class="search-header">
        <div class="search-left">
          <h1>客户经理：</h1>
          <ui-input v-model="managerName" placeholder="请输入"></ui-input>
        </div>
        <div class="search-btns">
          <ui-button type="warning" plain @click="queryManager">查询</ui-button>
          <ui-button type="warning" plain @click="resetManager">重置</ui-button>
        </div>
      </div>
      <div class="table-list">
        <vx-table :columns="columns" :table-data="tableData" :is-select="true" @multipleSelection="multipleSelection"> </vx-table>
        <div class="page">
          <ui-pagination
            :total="managerTotal"
            :page-size="managerPageSize"
            :current-page="managerCurrentPage"
            :layout="layout"
            @current-change="handleCurrentChange"
          >
          </ui-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <ui-button type="primary" @click="dialogshow = false">确 定</ui-button>
        <ui-button @click="dialogshow = false">取 消</ui-button>
      </span>
    </ui-dialog>
  </div>
</template>

<script>
import vxTable from '@/components/vx-table';
export default {
  name:'distribution-list',
  components: {
    vxTable,
  },
  data() {
    return {
      managerDialog: false,
      layout: 'total, sizes, prev, pager, next, jumper', // 分页顺序
      tableData: [{ userName: 1, updatedBy: '1', customerBy: '1', managetype: '1' }],
      columns: [
        {
          prop: 'userName',
          label: '客户经理名称',
          fixed: true,
          width: '120',
        },
        {
          prop: 'updatedBy',
          label: '客户经理所属机构',
          fixed: true,
        },
        {
          prop: 'customerBy',
          label: '客户经理编号',
          fixed: true,
        },
        {
          prop: 'managetype',
          label: '管理类型',
          formatter: (row, column, cellValue, index) => {
            return cellValue === '1' ? '主办' : '协办';
          },
          fixed: true,
        },
      ],
      managerData: [{ customerNo: '1', customerName: '1', customerOrg: '1', customerType: '1' }],
      managerColumns: [
        {
          prop: 'customerNo',
          label: '客户号',
          fixed: true,
          width: '120',
        },
        {
          prop: 'customerName',
          label: '客户名称',
          fixed: true,
        },
        {
          prop: 'customerOrg',
          label: '所属机构',
          fixed: true,
        },
        {
          prop: 'customerType',
          label: '分配状态',
          fixed: true,
        },
      ],
    };
  },
  methods: {
    // 选择客户经理
    onChoiceManager() {
      this.managerDialog = true;
    },
    // 多选
    multipleSelection(val) {
      console.log(val, '多选');
    },
    // 返回
    returnPrePage() {
      this.$router.push({ path: '/customerdivision/distribution/distributionsearch' });
    },
    // 分配
    goDistribution() {
      this.$router.push({ path: '/customerdivision/distribution/distributionlistconfirm' });
    },
  },
};
</script>

<style lang="scss" scoped>
.distribution-list-container {
  .list-distribution,
  .list-content {
    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        font-size: 20px;
      }
    }
    .list-table {
      margin-top: 20px;
      .page {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .list-content {
    margin-top: 20px;
  }
  .search-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search-left {
      h1 {
        width: 105px;
        font-size: 16px;
      }
      display: flex;
      align-items: center;
      width: 50%;
    }
  }
}
</style>
